<template>
	<view>
		<view class="details-box" v-for="(item,index) in list" :key="item.postId">
			<!-- 上部分 -->
			<view class="details-box-top">
				<view class="details-box-top-left">
					<image :src="item.userImage" mode="scaleToFill" class="details-box-top-Image"></image>
				</view>
				<view class="details-box-top-right">
					<text class="details-box-top-text">{{item.userName}}</text>
					<text class="details-box-top-date">·{{item.createDate}}</text>
				</view>
			</view>

			<!-- 中间区域 -->
			<view class="details-box-center">
				<swiper :indicator-dots="false" :interval="3000" :duration="1000">
					<swiper-item v-for="(items,i) in JSON.parse(item.detailsImage)" :key="i">
						<image :src="items.filePath" mode="widthFix"></image>
					</swiper-item>
				</swiper>
			</view>

			<!-- 下面区域 -->
			<view class="details-box-down">
				<view class="details-box-down-love">
					<view class="aaa" @click.stop="add(item)">
						<image src="../../static/动态点亮爱心.png" mode="" class="details-box-down-left" v-if="item.ifLove">
						</image>
						<image src="../../static/动态爱心.png" mode="" class="details-box-down-left" v-else></image>
						<text>{{item.likeCount}}</text>
					</view>


					<view class="bbb" @click.stop="collect(item,userId)">
						<image src="../../static/五角星.png" mode="" class="details-box-down-center" v-if="item.ifCollect">
						</image>
						<image src="../../static/五角星空.png" mode="" class="details-box-down-center" v-else></image>
						<text>{{item.collections}}</text>
					</view>

				</view>
				<view class="details-box-down-details">
					<view class="details-box-down-details-left">
						<text class="c">{{item.title}}</text>
						<text class="d">{{item.copywriting}}</text>
					</view>
					<view class="details-box-down-details-right" @click.stop="open(item.postId)">
						<text class="details-box-down-details-text">查看全文</text>
					</view>
				</view>
			</view>

		</view>
		<!-- 弹出层查看全文 -->
		<uni-popup ref="popup" :mask-click="false" background-color="#fff" class="popup-container">
			<view class="" v-if=popupVisible>
				<view class="top">
					<text class="top-title">正文和评论</text>
					<uni-icons type="closeempty" size="25"
						style="position: absolute;top: 50%;right: 2%;transform: translateY(-50%);"
						@click="close"></uni-icons>
				</view>
				<view class="scroll-content">
					<view class="scroll-content-text">{{details.title}}</view>
					<view class="scroll-content-content">{{details.specific}}</view>
					<view class="scroll-content-date">{{details.date}}</view>
					<!-- 自定义分割线组件 -->
					<uv-divider></uv-divider>
					<!-- 总评论数 -->
					<view class="scroll-content-comment">
						<text class="scroll-content-comment-text"
							v-if="details.comment.length>0">共{{details.comment.length}}条评论</text>
					</view>
					<!-- 评论展示区 -->
					<view class="scroll-content-zhutou">
						<!-- 评论详细 -->
						<view class="" v-if="details.comment.length>0">
							<view class="scroll-content-details" v-for="(items,dex) in details.comment" :key="dex">
								<view class="scroll-content-details-box">
									<image :src="items.userImage" mode=" aspectFit"
										class="scroll-content-details-Image">
									</image>
								</view>
								<view class="scroll-content-details-information">
									<text class="scroll-content-details-top">{{items.userName}}</text>
									<text class="scroll-content-details-center">{{items.comments}}</text>
									<text class="scroll-content-details-end">{{items.recoveryTime}}
										{{items.address}}</text>
								</view>
								<view class="scroll-content-details-love" @click.stop="love(items)">
									<uni-icons color="#c0c0c0" class="Love-control-left-box" type="heart" size="20"
										v-if="!items.flag"></uni-icons>
									<uni-icons color="red" class="Love-control-left-box" type="heart-filled" size="20"
										v-else></uni-icons>
									<text class="Love-control-box-text">{{items.likeCount}}</text>
								</view>
							</view>
						</view>

						<view class="details-hide" v-else>
							暂无评论
						</view>
					</view>
				</view>
			</view>


			<!-- 评论框 -->
			<view class="comments-box">

				<uni-easyinput prefixIcon="chat" v-model="value" @input="input" placeholder="有话要说,快来评论"
					@iconClick="iconClick" suffixIcon="paperplane-filled" maxlength=-1 focus>
				</uni-easyinput>
				
			</view>

		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popupVisible: false, // 控制弹出层的可见性
				//当前登录用户id
				userId: 1,
				//当前页数
				page: 1,
				size:10,
				//节流阀
				isloading:false,
				list: [],
				//点击查看全文时获取相应的详细信息
				details: {
					comment: []
				},
				//评论框输入值
				value: '',
				//点击查看全文当前的作品id
				postId: 0,
				total:0
			};
		},
		onLoad() {
			this.followInfo(this.userId, this.page);
		},
		methods: {
			//评论框输入事件
			input(e) {
				setTimeout(() => {
					this.value = e;
					console.log('输入内容：', this.value);
				}, 500)

			},
			//判断用户如果点击发送按钮就将评论发送
			async iconClick(type) {
				const _this = this
				if (type === 'suffix') {
					if (this.value.length <= 0) return uni.$ShowMsg("请输入评论！")
					console.log(this.value)
					const {
						data: res
					} = await uni.$http.post('http://localhost:8080/comment/info/add', {
						postId: _this.postId,
						userId: _this.userId,
						comments: _this.value
					})
					if (res.code !== 200) {
						return uni.$ShowMsg("数据异常！");
					} else {
						if (res.data <= 0) {
							return uni.$ShowMsg("评论发送失败!");
						} else {
							_this.$set(_this.details, "comment", _this.commentInfo(_this.postId));
						}
					}
				}
			},
			//解析获取对应的图片路径
			getImagePath(imageArray) {
				if (Array.isArray(imageArray) && imageArray.length > 0) {
					return imageArray[0].filePath;
				}
				return ''; // 或者默认的图片路径
			},
			open(postId) {
				this.popupVisible = true;
				this.postId = postId;
				this.commentInfo(postId);
				this.$refs.popup.open('bottom')
			},
			close() {
				this.popupVisible = false;
				this.$refs.popup.close()
			},
			async commentInfo(postId) {
				const _this = this
				const {
					data: res
				} = await uni.$http.post('http://localhost:8080/dynamic/info/detailsList', {
					userId: _this.userId,
					postId: postId
				})
				if (res.code !== 200) return uni.$ShowMsg("数据获取失败！");
				this.details = res.data;
			},
			async followInfo(userId, page) {
				const {
					data: res
				} = await uni.$http.post('http://localhost:8080/dynamic/info/dynamicList', {
					userId: userId,
					page: page
				})
				if (res.code !== 200) return uni.$ShowMsg("数据获取失败！");
				this.list = res.data;
			},


			//点赞相关请求逻辑
			async add(clickedItem) {
				console.log(clickedItem)
				const _this = this;
				const _items = clickedItem;
				if (clickedItem.ifLove) {
					const {
						data: res
					} = await uni.$http.post('http://localhost:8080/user/love/delete', {
						postId: _items.postId,
						userId: _this.userId
					})
					if (res.code !== 200) return uni.$ShowMsg();
					if (res.data > 0) {
						// 将对应的点赞数减1
						_this.likeCountDelete(_items, _items.postId, _items.likeCount);
					} else {
						uni.$ShowMsg("取消失败！")
					}
				} else {
					const {
						data: res
					} = await uni.$http.post('http://localhost:8080/user/love/add', {
						postId: _items.postId,
						userId: _this.userId
					})
					if (res.code !== 200) return uni.$ShowMsg();
					if (res.data > 0) {
						//将对应的点赞数加1
						_this.likeCountAdd(_items, _items.postId, _items.likeCount);
					} else {
						uni.$ShowMsg("点赞失败！")
					}
				}
			},


			//将点赞数减1
			async likeCountDelete(clickedItem, postId, likeCount) {
				console.log(clickedItem)
				const {
					data: res
				} = await uni.$http.post('http://localhost:8080/user/article/likeCountDelete', {
					postId: postId,
					likeCount: likeCount - 1
				})
				if (res.code !== 200) {
					return uni.$ShowMsg("取消失败，数据异常！");
				} else {
					this.$set(clickedItem, 'ifLove', false);
					this.$set(clickedItem, 'likeCount', clickedItem.likeCount - 1);
				}
			},
			//将点赞数加1
			async likeCountAdd(clickedItem, postId, likeCount) {
				const {
					data: res
				} = await uni.$http.post('http://localhost:8080/user/article/likeCountAdd', {
					postId: postId,
					likeCount: likeCount + 1
				})
				if (res.code !== 200) {
					return uni.$ShowMsg("点赞失败，数据异常！");
				} else {
					this.$set(clickedItem, 'ifLove', true);
					this.$set(clickedItem, 'likeCount', clickedItem.likeCount + 1);
				}
			},


			//收藏相关请求逻辑
			async collect(item, userId) {
				const _this = this
				const _item = item
				if (item.ifCollect) {
					//执行取消点赞的逻辑
					const {
						data: res
					} = await uni.$http.post('http://localhost:8080/user/collect/delete', {
						postId: _item.postId,
						userId: userId
					})
					if (res.code !== 200) return uni.$ShowMsg();
					if (res.data) {
						// 将对应的点赞数减1
						_this.$set(_item, 'collections', _item.collections - 1);
						_this.$set(_item, 'ifCollect', false);
					} else {
						uni.$ShowMsg("取消失败！")
					}
				} else {
					//执行点赞的逻辑
					const {
						data: res
					} = await uni.$http.post('http://localhost:8080/user/collect/add', {
						postId: _item.postId,
						userId: userId
					})
					if (res.code !== 200) return uni.$ShowMsg();
					if (res.data) {
						// 将对应的点赞数减1
						_this.$set(_item, 'collections', _item.collections + 1);
						_this.$set(_item, 'ifCollect', true);
					} else {
						uni.$ShowMsg("点赞失败！")
					}
				}
			},

			//评论点赞相关逻辑
			async love(item) {
				const _this = this
				const _item = item
				if (item.flag) {
					//执行取消点赞的逻辑
					const {
						data: res
					} = await uni.$http.post('http://localhost:8080/post/comment/delete', {
						detailsId: _item.detailsId,
						userId: _this.userId
					})
					if (res.code !== 200) return uni.$ShowMsg();
					if (res.data) {
						// 将对应的点赞数减1
						_this.$set(_item, 'likeCount', _item.likeCount - 1);
						_this.$set(_item, 'flag', false);
					} else {
						uni.$ShowMsg("取消失败！")
					}
				} else {
					//执行点赞的逻辑
					const {
						data: res
					} = await uni.$http.post('http://localhost:8080/post/comment/add', {
						detailsId: _item.detailsId,
						userId: _this.userId
					})
					if (res.code !== 200) return uni.$ShowMsg();
					if (res.data) {
						// 将对应的点赞数减1
						_this.$set(_item, 'likeCount', _item.likeCount + 1);
						_this.$set(_item, 'flag', true);
					} else {
						uni.$ShowMsg("点赞失败！")
					}
				}
			},
			//触底的事件
			onReachBottom() {
				//判断是否还有下一页数据
				if (this.page * this.size >= this.total)
					return uni.$ShowMsg('数据加载完毕！')
			
				//判断是否正在请求其他数据，如果是，则不发起额外的请求
				if (this.isloading) return
				//让页码值自增+1
				this.page += 1
				//重新获取列表数据
				this.followInfos()
			},
			onPullDownRefresh() {
				//重置关键数据
				this.page = 1
				this.total = 0
				this.isloading = false
				this.list = []
			
				//重新发起数据请求
				this.followInfos(() => uni.stopPullDownRefresh())
			},
			async followInfos() {
				const _this = this;
				//打开节流阀
				this.isloading = true
				const {
					data: res
				} = await uni.$http.post('http://localhost:8080/dynamic/info/dynamicList', {
					userId: _this.userId,
					page: _this.page,
					size:_this.size
				})
				if (res.code !== 200) return uni.$ShowMsg("数据获取失败！");
				//关闭节流阀
				this.isloading = false;
				if (typeof cb === 'function') {
					cb();
				}
				//为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
				this.list = [...this.list, ...res.data];
				this.total = res.total
			}
		}
	}
</script>

<style lang="scss">
	.details-box {
		width: 750rpx;
		margin-bottom: 40rpx;

		.details-box-top {
			height: 80rpx;
			width: 750rpx;
			display: flex;

			.details-box-top-left {
				width: 15%;
				display: flex;
				align-items: center;
				justify-content: center;

				.details-box-top-Image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					display: block;
				}
			}

			.details-box-top-right {
				line-height: 80rpx;

				.details-box-top-text {
					font-size: 30rpx;

				}

				.details-box-top-date {
					font-size: 24rpx;
					color: #c0c0c0;
				}
			}
		}

		.details-box-center {


			swiper {
				width: 750rpx;
				height: 580rpx;

				image {
					width: 100%;
					height: auto;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			/* 修改非活动状态下的页数显示点颜色 */
			.swiper-pagination-bullet {
				background-color: #c0c0c0;
			}

			/* 修改活动状态下的页数显示点颜色 */
			.swiper-pagination-bullet-active {
				background-color: #fff;
			}
		}

		.details-box-down {
			width: 750rpx;

			.details-box-down-love {
				width: 100%;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;



				.aaa {
					display: flex;
					align-items: center;
					justify-content: center;
					// background-color: aqua;

					.details-box-down-left {
						width: 50rpx;
						height: 50rpx;
						margin-right: 10rpx;
					}

				}

				.bbb {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 38rpx;
					// background-color: blueviolet;


					.details-box-down-center {
						width: 50rpx;
						height: 50rpx;
						margin: 0 10rpx;
					}
				}



				.ii {
					margin-right: 20rpx;
				}
			}

			.details-box-down-details {
				width: 750rpx;
				height: 60rpx;
				display: flex;

				.details-box-down-details-left {
					padding-left: 38rpx;
					width: 525rpx;
					line-height: 60rpx;
					white-space: nowrap;
					/* 禁止换行 */
					overflow: hidden;
					/* 隐藏溢出的文字 */
					text-overflow: ellipsis;
					/* 使用省略号代替溢出的文字 */
					font-size: 30rpx;

					.c {
						margin-right: 20rpx;
					}
				}

				.details-box-down-details-right {
					width: 225rpx;
					line-height: 60rpx;
					text-align: left;

					.details-box-down-details-text {
						color: #000000;
						font-weight: 700;
						font-size: 30rpx;
					}
				}
			}
		}
	}

	//弹出层样式
	.popup-container {

		.top {
			position: sticky;
			width: 750rpx;
			height: 52rpx;
			text-align: center;
			margin-bottom: 40rpx;

			.top-title {
				line-height: 52rpx;
			}
		}

		/deep/ .scroll-content {
			height: 75vh;
			overflow-y: auto;

			.scroll-content-text {
				font-size: 30rpx;
				font-family: "微软雅黑", sans-serif;
				line-height: 50rpx;
				display: block;
				padding: 0 20rpx;
			}

			.scroll-content-content {
				font-size: 30rpx;
				font-family: "微软雅黑", sans-serif;
				line-height: 50rpx;
				display: block;
				margin-bottom: 38rpx;
				padding: 0 20rpx;
			}

			.scroll-content-date {
				font-size: 24rpx;
				color: #c0c0c0;
				padding: 0 20rpx;
			}

			.scroll-content-comment {
				height: 40rpx;
				padding: 0 20rpx;

				.scroll-content-comment-text {
					color: #a2a294;
					font-size: 28rpx;
				}
			}

			.scroll-content-zhutou {
				width: 750rpx;
				margin-top: 30rpx;

				.details-hide {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 50rpx;
					width: 100%;
					height: 300rpx;
					color: #c0c0c0;
				}

				.scroll-content-details {
					width: 750rpx;
					display: flex;

					.scroll-content-details-box {
						width: 13%;
						display: flex;
						align-items: flex-start;
						justify-content: center;


						.scroll-content-details-Image {
							margin-top: 20rpx;
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							display: block;
						}
					}

					.scroll-content-details-information {
						width: 77%;
						border-bottom: 1px solid #c0c0c0;

						.scroll-content-details-top {
							display: block;
							color: #c0c0c0;
							font-size: 26rpx;
						}

						.scroll-content-details-center {
							display: block;
							font-size: 28rpx;
						}

						.scroll-content-details-end {
							display: block;
							font-size: 24rpx;
							color: #c0c0c0;
							margin-bottom: 36rpx;
						}
					}

					.scroll-content-details-love {
						border-bottom: 1px solid #c0c0c0;
						width: 10%;
						display: flex;
						flex-direction: column;
						align-items: center;


						.Love-control-left-box {
							margin-top: 20rpx;
						}

						.Love-control-box-text {
							margin-top: 10rpx;
							font-size: 20rpx;
							color: #c0c0c0;
						}
					}
				}
			}
		}

		//评论框样式
		.comments-box {
			width: 750rpx;
			display: flex;
			background-color: #fff;
			position: sticky;
			bottom: 0;


			.aaa {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 10rpx;

				.details-box-down-left {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}

			}

			.bbb {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 10rpx;


				.details-box-down-center {
					width: 40rpx;
					height: 40rpx;
					margin: 0 10rpx;
				}
			}
		}
	}
</style>